<template>
  <nut-cell :desc="desc" @click="visible = true"></nut-cell>
  <nut-popup v-model:visible="visible" position="bottom">
    <nut-picker ref="selectRef" v-model="text" :columns="dic" :title="title" v-on="onEvents">
      <template v-for="slot in Object.keys($slots)" #[slot]="scope">
        <slot v-bind="scope" :name="slot" />
      </template>
    </nut-picker>
  </nut-popup>
</template>

<script setup>
import { commonProps } from '@/supreme/core/props';
import { useEvents } from '@/supreme/core';
import { useVModel } from '@vueuse/core';
defineOptions({
  name: 'SuSelect'
});
const props = defineProps({
  ...commonProps,
  modelValue: {
    type: String,
    default: ''
  },
  iconSize: {
    type: String,
    default: '18'
  },
  title: {
    type: String,
    default: ''
  },
  cancelText: {
    type: String,
    default: ''
  },
  visibleOptionNum: {
    type: [String, Number]
  },
  optionHeight: {
    type: [String, Number]
  },
  shape: {
    type: String,
    default: 'round'
  },
  size: {
    type: String,
    default: 'normal'
  },
  confirm: {
    type: Function,
    default: () => {}
  }
});

const emit = defineEmits(['update:modelValue', 'change', 'confirm', 'cancel']);
const text = useVModel(props, 'modelValue', emit);
const formSafe = inject('formSafe');
const selectRef = ref();
const visible = ref(false);
const onEvents = computed(() => {
  const events = [
    {
      name: 'confirm',
      callback: () => {
        visible.value = false;
      }
    },
    {
      name: 'cancel',
      callback: () => {
        visible.value = false;
      }
    },
    {
      name: 'change'
    }
  ];
  return useEvents({ props, events, emit, form: formSafe?.form });
});
</script>

<style lang="scss" scoped></style>
